<style scoped>
.setting-dialog {
  max-width: 1920px;
  position: fixed;
  margin: 0px;
  min-width: 120px;
  min-height: 33px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  padding-bottom: 5px;
}
.setting-dialog .dia-title {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  line-height: 32px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  padding-left: 12px;
  padding-right: 4px;
  margin: 0;
  display: flex;
  position: relative;
  color: #333;
  justify-content: space-between;
  font-weight: bold;
}
.setting-dialog .dia-title .icon-group {
  display: flex;
  flex-flow: row;
  margin-left: 12px;
}
.setting-dialog .dia-title .icon-group .icon {
  width: 24px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  color: #000000;
}
.setting-dialog .dia-title .icon-group .icon:hover {
  color: #409eff;
}
.setting-dialog .dia-title .icon-group .icon-move {
  position: relative;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.setting-dialog .dia-title .icon-group .icon-move .icon-move-ab {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.setting-dialog .untitle .dia-main {
  min-height: inherit;
  overflow: auto;
  padding: 0 24px;
  width: 100%;
}
.setting-dialog .untitle .dia-footer {
  border-top: 1px solid #eaeefb;
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: -1px;
  position: relative;
  text-align: right;
  padding: 0 12px;
}
</style>
<!-- 在设计区域弹出层 dialog -->
<template>
  <transition name="el-zoom-in-center" v-on:after-leave="transitionLeave">
    <div v-show="dialogShow" class="setting-dialog" @mousemove="moveto($event)"
      :style="'top: '+top+'px;left: '+left+'px;' + (moveing? 'cursor: move;':'') + 'z-index: '+zIndex+';'"
      ref="settingDialog">
      <div class="dia-title noselect">
        <span>{{title}}</span>
        <div class="icon-group">
          <div class="icon-move">
            <div class="icon-move-ab"
              :style="moveing? ('width: '+currentClientWidth+'px;height: '+currentClientHeight+'px;'):''">
              <el-tooltip class="item" effect="dark" content="点击移动，再次点击取消移动" placement="bottom-start"
                :disabled="moveDisabled">
                <span class="icon" @click.left="toggleMove($event)"
                  :style="moveing? 'font-size:26px;color: #409eff;cursor: move;':''"><i class="el-icon-rank"></i></span>
              </el-tooltip>
            </div>
          </div>
          <span class="icon" @click.stop="untitleShow = !untitleShow"><i
              :class="{'el-icon-arrow-down':!untitleShow ,'el-icon-arrow-up':untitleShow}"></i></span>
          <span class="icon" @click.stop="dialogClose"><i class="el-icon-close"></i></span>
        </div>
      </div>
      <transition name="el-fade-in-linear">
        <div v-show="untitleShow" class="untitle">
          <transition name="el-fade-in-linear">
            <div v-show="diamainShow" class="dia-main">
              <slot></slot>
            </div>
          </transition>
          <div class="dia-footer noselect">
            <el-button v-if="mainDiamainShow" @click.stop="diamainShow = !diamainShow" type="text"
              v-text="diamainShow ? '隐藏': '展开'"></el-button>
            <el-button type="primary" size="mini" v-if="typeof this.saveclose === 'function'" @click.stop="saveclose">
              {{savecloseText}}</el-button>
            <el-button size="mini" @click.stop="dialogClose">关闭</el-button>
            <el-button type="success" size="mini" v-if="typeof this.save === 'function'" @click.stop="save">{{saveText}}
            </el-button>
            <el-button type="info" size="mini" v-if="typeof this.reduction === 'function'" @click.stop="reduction">还原
            </el-button>
            <el-button type="warning" size="mini" v-if="typeof this.renders === 'function'" @click.stop="renders">渲染
            </el-button>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
import 'element-ui/lib/theme-chalk/base.css'
export default {
  props: {
    // 显示的title
    title: {
      type: String,
      default: ''
    },
    // 是否显示
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 关闭方法
    close: {
      type: Function
    },
    // 渲染方法
    renders: {
      type: Function
    },
    // 还原方法
    reduction: {
      type: Function
    },
    // 保存
    save: {
      type: Function
    },
    // 保存并且关闭
    saveclose: {
      type: Function
    },
    // 层级别
    zIndex: {
      type: Number,
      default: 900
    },
    // 是否显示 展开、隐藏 功能按钮
    mainDiamainShow: {
      type: Boolean,
      default: true
    },
    savecloseText: {
      type: String,
      default: '保存并关闭'
    },
    saveText: {
      type: String,
      default: '保存'
    }
  },
  mounted () {
    this.positionCenter()
  },
  data () {
    return {
      // 是否显示
      dialogShow: this.dialogVisible,
      // 是否关闭内容部分
      untitleShow: true,
      // 是否显示主题部分
      diamainShow: true,
      // 是否在移动
      moveing: false,
      // 是否显示点击移动提示内容
      moveDisabled: false,
      // 鼠标与当前相对位置x轴
      offsetX: 0,
      // 鼠标与当前相对位置y轴
      offsetY: 0,
      // 显示窗体x轴偏移
      left: 0,
      // 显示窗体y轴偏移
      top: 0
    }
  },
  computed: {
    currentClientWidth () {
      if (!window) {
        return 500
      }
      return window.document.documentElement.clientWidth || window.document.body.clientWidth
    },
    currentClientHeight () {
      if (!window) {
        return 500
      }
      return window.document.documentElement.clientHeight || window.document.body.clientHeight
    }
  },
  watch: {
    dialogVisible: {
      handler () {
        this.dialogShow = this.dialogVisible
      },
      deep: true
    }
  },
  methods: {
    toggleMove (event) {
      this.moveing = !this.moveing
      if (this.moveing) {
        // let x = event.clientX
        // this.offsetX = x - this.left
        let offsetWidth = this.$refs['settingDialog'].offsetWidth
        // 减去右边的 padding-right:4px & 两个icon & 最后当前 icon 的一半
        this.offsetX = offsetWidth - 4 - 2 * 24 - 12
        this.offsetY = 16
        this.moveDisabled = true
        this.moveto(event)
      } else {
        this.moveDisabled = false
      }
    },
    moveto (event) {
      if (this.moveing) {
        let x = event.clientX
        let y = event.clientY
        // 显示区域宽度
        let clientW = window.document.documentElement.clientWidth || window.document.body.clientWidth
        // 显示区域高度
        let clientH = window.document.documentElement.clientHeight || window.document.body.clientHeight
        // 当前 dialog 宽度
        let offsetWidth = this.$refs['settingDialog'].offsetWidth
        let left = x - this.offsetX
        if (left < 0) {
          left = 0
        }
        if ((offsetWidth + left) > clientW) {
          left = clientW - offsetWidth
        }
        this.left = left
        let top = y - this.offsetY
        if (top < 0) {
          top = 0
        }
        if ((top + 33) > clientH) {
          top = clientH - 33
        }
        this.top = top
      }
    },
    // 自动定位
    positionCenter () {
      // this.moveing = false
      let clientW = window.document.documentElement.clientWidth || window.document.body.clientWidth
      let clientH = window.document.documentElement.clientHeight || window.document.body.clientHeight
      let offsetWidth = this.$refs['settingDialog'].offsetWidth
      let offsetHeight = this.$refs['settingDialog'].offsetHeight
      this.left = (clientW - offsetWidth) / 2
      this.top = (clientH - offsetHeight) / 2
    },
    dialogClose () {
      this.dialogShow = false
    },
    transitionLeave () {
      if (typeof this.close === 'function') {
        this.close()
      }
    },
    changeDiamainShow (bool) {
      this.diamainShow = bool
    },
    changeUntitleShow (bool) {
      this.untitleShow = bool
    },
    open () {
      this.changeDiamainShow(true)
      this.changeUntitleShow(true)
      this.$nextTick(() => {
        this.positionCenter()
      })
    }
  }
}

</script>
